<section class="igz-general-content" data-igz-extend-background>

    <!--splash screen-->
    <igz-splash-screen data-is-splash-showed="$ctrl.isSplashShowed"></igz-splash-screen>

    <!--filters-->
    <igz-info-page-filters data-is-filters-showed="$ctrl.isFiltersShowed.value"
                           data-apply-filters="$ctrl.onApplyFilters(false)"
                           data-reset-filters="$ctrl.onResetFilters(false)"
                           data-change-state-callback="$ctrl.isFiltersShowed.changeValue(newVal)"
                           data-toggle-method="$ctrl.toggleFilters()">

        <igz-search-input class="info-page-filters-item igz-component"
                          data-data-set="$ctrl.projects"
                          data-search-keys="$ctrl.searchKeys"
                          data-search-callback="$ctrl.onUpdateFiltersCounter(searchQuery)"
                          data-placeholder="{{ 'functions:PLACEHOLDER.SEARCH_PROJECTS' | i18next }}"
                          data-live-search="false"
                          data-search-states="$ctrl.searchStates">
        </igz-search-input>
    </igz-info-page-filters>

    <!--actions bar-->
    <igz-info-page-actions-bar class="igz-component">
        <div class="actions-bar-left">
            <igz-action-panel data-actions="$ctrl.projectActions">
            </igz-action-panel>
        </div>
        <div class="actions-bar-right">
            <button class="project-import-input"
                    ngf-select="$ctrl.importProject($file)"
                    accept=".yml, .yaml">
            </button>
            <div class="actions-bar-left actions-buttons-block">
                <igz-default-dropdown data-select-property-only="id"
                                      data-placeholder="{{ 'functions:PLACEHOLDER.ACTIONS' | i18next }}"
                                      data-values-array="$ctrl.dropdownActions"
                                      data-item-select-callback="$ctrl.onSelectDropdownAction(item)"
                                      data-skip-selection="true">
                </igz-default-dropdown>
                <button class="ncl-new-entity-button igz-button-primary"
                        data-ng-click="$ctrl.openNewProjectDialog()">
                    {{ 'functions:NEW_PROJECT' | i18next }}
                </button>
                <button class="ncl-new-entity-button igz-button-primary"
                        data-ng-click="$ctrl.openNewFunctionScreen()">
                    {{ 'functions:NEW_FUNCTION' | i18next }}
                </button>
            </div>
            <div class="actions-bar-left actions-content-block">
                <div class="igz-action-panel">
                    <div class="actions-list">
                        <igz-action-item-refresh
                                data-refresh="$ctrl.refreshProjects()">
                        </igz-action-item-refresh>
                        <igz-sort-dropdown class="igz-component pull-left"
                                           data-sort-options="$ctrl.sortOptions"
                                           data-selected-option="$ctrl.sortedColumnName"
                                           data-reverse-sorting="$ctrl.isReverseSorting"
                                           data-on-sort-change="$ctrl.onSortOptionsChange(option)">
                        </igz-sort-dropdown>
                    </div>
                </div>
            </div>
            <igz-actions-panes data-filters-toggle-method="$ctrl.toggleFilters()"
                               data-filters-counter="$ctrl.filtersCounter"
                               data-show-filter-icon="true"
                               data-is-filters-opened="$ctrl.isFiltersShowed.value">
            </igz-actions-panes>
        </div>
    </igz-info-page-actions-bar>

    <!--page content-->
    <igz-info-page-content class="igz-component">
        <div class="common-table">
            <div class="common-table-header">
                <div class="common-table-cell igz-col-3">
                    <igz-action-checkbox-all class="check-all-rows"
                                             data-items-count="$ctrl.projects.length"
                                             data-items-type="{{$ctrl.projectsService.checkedItem}}">
                    </igz-action-checkbox-all>
                </div>
                <div class="igz-row common-table-cells-container">
                    <div class="igz-col-25 common-table-cell sortable"
                         data-ng-class="$ctrl.getColumnSortingClasses('metadata.name', $ctrl.sortedColumnName, $ctrl.isReverseSorting)"
                         data-ng-click="$ctrl.sortTableByColumn('metadata.name')">
                        {{ 'common:NAME' | i18next }}
                        <span class="sort-arrow"></span>
                    </div>
                    <div class="igz-col-75 common-table-cell sortable"
                         data-ng-class="[$ctrl.getColumnSortingClasses('spec.description', $ctrl.sortedColumnName, $ctrl.isReverseSorting)]"
                         data-ng-click="$ctrl.sortTableByColumn('spec.description')">
                        {{ 'common:DESCRIPTION' | i18next }}
                        <span class="sort-arrow"></span>
                    </div>
                </div>
                <div class="common-table-cell actions-menu">&nbsp;</div>
            </div>

            <div class="search-input-not-found"
                 data-ng-if="$ctrl.isProjectsListEmpty()">
                {{ 'functions:PROJECTS_NOT_FOUND' | i18next }}
            </div>

            <div class="common-table-body" data-igz-extend-background>
                <div class="igz-scrollable-container"
                     data-ng-scrollbars>
                    <div class="sortable-wrapper"
                         data-ng-hide="$ctrl.searchStates.searchNotFound && $ctrl.searchStates.searchInProgress">
                        <div data-ng-repeat="project in $ctrl.sortedProjects track by project.metadata.name">
                            <div data-igz-show-hide-search-item="project">
                                <ncl-project-table-row
                                        data-is-splash-showed="$ctrl.isSplashShowed"
                                        data-project="project"
                                        data-project-action-handler-callback="$ctrl.handleProjectAction(actionType, checkedItems)"
                                        data-projects-list="$ctrl.projects">
                                </ncl-project-table-row>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </igz-info-page-content>
</section>
